<#assign module="marketing"/>

<@override name="header">
<style>
	/* autocomplete */
	div.ac {border: 1px solid #ccc;position: absolute;display: none;overflow: auto;background-color: #ffffff;z-index:998;}
	div.ac > ul {margin-top:10px;padding:0;}
	div.ac > ul > li {height:33px;line-height:33px;cursor:pointer;}
	div.ac > ul > li:hover{background:#eee;}
	div.ac > ul > li > div span {padding-left:15px;}
	div.ac > ul > li > div span em {color:red;font-style: normal;}
</style>
</@override>
<@override name="body">

	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					客户短信群发
			    </div>
			    <div class="panel-body">
    				<form id="submit_form" class="form-horizontal">
		                <input type="hidden" name="phoneArray" id="phoneArray" />
		                <div class="form-group">
		                    <label class="col-sm-3 control-label"></label>
		                    <div class="col-sm-6">
		                    	<font color="red">注：遵守国家有关法律、行政法规和管理规章，请勿发送垃圾、广告、以及其他含有法律，行政法规禁止内容的短信。一经发现，将做封号处理（短信费用不退还）。</font>
		                    </div>
		                </div>
		                
		                <div class="form-group">
		                    <label class="col-sm-3 control-label"><em>*</em>内容：</label>
		                    <div class="col-sm-6">
		                    	<textarea class="form-control" cols="20" id="content" name="content" rows="8" required></textarea>
		                    	<span>每64个字符（空格也算作一个字符）算作为一条短信，当前显示长度不包含签名，最终短信内容将增加签名长度，已输入<span id="putWords" style="color:red;">0</span>个字符。</span>
		                    </div>
		                </div>
		                
		                <div class="form-group">
		                    <label class="col-sm-3 control-label"><em>*</em>内容对象：</label>
		                    <div class="col-sm-8">
		                    	<p class="form-control-static">
									<label style="padding-right:20px;">
										<input type="radio" name="type" value="common" checked="checked">个人用户
									</label>
									<label style="padding-right:20px;">
										<input type="radio" name="type" value="vip">VIP用户
									</label>
									<label style="padding-right:20px;">
										<input type="radio" name="type" value="company">企业用户
									</label>
									<label style="padding-right:20px;">
										<input type="radio" name="type" value="all">所有用户
									</label>
									<label style="padding-right:20px;">
										<input type="radio" name="type" value="person">单个用户
									</label>
									<label style="padding-right:20px;">
										<input type="radio" name="type" value="some">指定用户
									</label>
								</p>
		                    </div>
		                </div>
		                
		                <div class="form-group" id="person_div" style="display:none;">
		                    <label class="col-sm-3 control-label"><em>*</em>手机号：</label>
		                    <div class="col-sm-3">
		                    	<input class="form-control" id="personPhone" name="personPhone" type="text"/>
		                    </div>
		                    <div class="col-sm-3">
		                    	<span class="help-block" id="personPhone_span"></span>
		                    </div>
		                </div>
		                
		                <div id="some_div" style="display:none;">
			                <div class="form-group">
			                    <label class="col-sm-3 control-label">手机号：</label>
			                    <div class="col-sm-3">
			                    	<input class="form-control" id="somePhones" name="somePhones" type="text"/>
			                    </div>
			                </div>
			                <div class="form-group">
			                    <label class="col-sm-3 control-label"><em>*</em>已选择：</label>
			                    <div class="col-sm-6">
			                    	<div class="well" id="some_well"></div>
			                    	<span>点击已选择的用户可取消选择</span>
			                    </div>
			                </div>
		                </div>
		                
		                <div class="form-group" style="margin-left:10px;">
			                <label class="col-sm-3 control-label"></label>
			                <input id="submit_button" type="submit" class="btn btn-primary" value="发送">
			            </div>
			            
					</form>
        		</div>
			</div>
		</div>
	</div>

</@override>
<@override name="footer">
<script src="${ctx}/assets/js/jquery.autocomplete.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	
		$("#content").keyup(function(){
			$("#putWords").html($(this).val().length);
		});
		
		$("input[name=type]").change(function(){
			if($(this).val()=="person"){
				$("#some_div").hide();
				$("#person_div").slideDown();
			}
			else if($(this).val()=="some"){
				$("#person_div").hide();
				$("#some_div").slideDown();
			}
			else{
				$("#person_div").hide();
				$("#some_div").hide();
			}
		});
		
		$('#personPhone').AutoComplete({
            'data': "${ctx}/member/queryMemberByPhone",
			'ajaxDataType': 'json',
            'width': 'auto',
            'async': true,
            'listStyle': 'custom',
	        'emphasis': false,
	        'listDirection': 'up',
	        'matchHandler': function(keyword, data){
	            return true;
	        },
	        'createItemHandler': function(index, data){
	            return "<span>"+data.phone+" "+data.name+"</span>";
	        },
	        'afterSelectedHandler': function(data){
	        	$("#personPhone").val(data.phone);
	        	$("#personPhone_span").html(data.name);
	        	$("#phoneArray").val(","+data.id+",");
	        }
        }).AutoComplete('show');
        
        var someArray=[];
        $('#somePhones').AutoComplete({
            'data': "${ctx}/member/queryMemberByPhone",
			'ajaxDataType': 'json',
            'width': 'auto',
            'async': true,
            'listStyle': 'custom',
	        'emphasis': false,
	        'listDirection': 'up',
	        'matchHandler': function(keyword, data){
	            return true;
	        },
	        'createItemHandler': function(index, data){
	            return "<span>"+data.phone+" "+data.name+"</span>";
	        },
	        'afterSelectedHandler': function(data){
	        	if(getSomeArray(data.id)){
	        		$.scojs_message("该客户已在选择列表", $.scojs_message.TYPE_ERROR);
	        	}
	        	else{
	        		$("#some_well").append('<button style="margin-bottom:3px;" id="some-btn-'+data.id+'" class="btn btn-primary some-btn" type="button" data-id="'+data.id+'">'+data.phone+'&nbsp;<span class="badge">'+data.name+'</span></button> ');
	        		someArray.push(data.id);
	        		$("#phoneArray").val(","+someArray.join(",")+",");
	        	}
	        }
        }).AutoComplete('show');
        
        $(document).on('click','.some-btn',function(){
        	var memberId=$(this).attr("data-id");
        	removeSomeArray(memberId);
        	$("#some-btn-"+memberId+"").remove();
        	$("#phoneArray").val(","+someArray.join(",")+",");
        });
        
        function getSomeArray(memberId){
			if(memberId==null || someArray.length==0){
				return null;
			}
			var sa=null;
			$(someArray).each(function(index,id){
				if(id == memberId){
					sa=id;
					return false;
				}
			});
			return sa;
		}
		
		function removeSomeArray(memberId){
			if(someArray.length>0){
				$(someArray).each(function(index,id){
					if(id == memberId){
						someArray.splice(index,1);
						return;
					}
				});
			}
		}
		
		$("#submit_form").submit(function(){
			
			if($("#content").val().length==0){
				$.scojs_message("请输入短信内容", $.scojs_message.TYPE_ERROR);
				return false;
			}
			
			if($("input[name=type]:checked").length==0){
				$.scojs_message("请选择发送内容对象", $.scojs_message.TYPE_ERROR);
				return false;
			}
			
			if($("input[name=type]:checked").val()=="person"){
				if($("#phoneArray").val()==''){
					$.scojs_message("手机号不能为空", $.scojs_message.TYPE_ERROR);
					return false;
				}
			}
			
			if($("input[name=type]:checked").val()=="some"){
				if(someArray.length==0){
					$.scojs_message("至少选择一个手机号", $.scojs_message.TYPE_ERROR);
					return false;
				}
			}
			
			$("#submit_button").attr("disabled",true);
			
			$.post("${ctx}/sms/sendMemberPost",$("#submit_form").serialize(),function(result){
				if(result.success){
					$.scojs_message("发送成功", $.scojs_message.TYPE_OK);
					setTimeout(function(){
						window.location.reload(true);
					},1000);
					
				}
				else{
					$.scojs_message(result.message, $.scojs_message.TYPE_ERROR);
					$("#submit_button").attr("disabled",false);
				}
			});
			
			return false;
			
		});
		
	});
</script>
</@override>
<@extends name="../layout.ftl"/>